<template>
  <div class="footer">
    <div class="left">
      <h3>HY Web</h3>
      <ul>
        <li>关于我们</li>
        <li>联系我们</li>
        <li>用户协议</li>
        <li>加入我们</li>
        <li>反馈意见</li>
        <li>技术支持</li>
      </ul>
    </div>
    <div class="center">
      <h3>传送门</h3>
      <ul>
        <li>研招网</li>
        <li>中国考研网</li>
        <li>考研信息网</li>
        <li>中国知网</li>
        <li>中国大学慕课网</li>
        <li>中国教育在线</li>
      </ul>
    </div>
    <div class="right">
      <ul>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
        <li><i></i></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  name: "Footer",
};
</script>

<style scoped>
.footer {
  width: 100%;
  height: 300px;
  display: flex;
  margin-top: 20px;
  box-sizing: border-box;
  padding: 0 20px;
  background-color: #f6f9fa;
  box-shadow: -5px -2px -5px #c0c4cc;
}
.footer h3 {
  padding: 20px 10px;
  color: #606266;
}
.footer ul {
  padding: 0 50px;
  color: #303133;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  border-right: 1px solid #c0c4cc;
}
.left {
  padding: 20px;
}
.left ul {
  width: 300px;
}
.left li {
  margin: 10px 40px;
  cursor: pointer;
}
.center {
  width: 400px;
  padding: 20px;
}
.center ul {
  width: 400px;
}
.center li {
  width: 100px;
  cursor: pointer;
  margin: 10px 40px;
}
</style>
